<template>
  <div class="login-wrap" id="indexLizi">
    <div class="login-title">浙江财经大学东方学院讲座管理系统</div>
<!-- 登录 -->
    <el-form v-show="!isShow" :model="loginForm" :rules="loginRules" ref="loginForm"  class="login-container">
      <el-button class="change" type="text" @click="isShow=true">注册</el-button>
      <div class="title">登录</div>
      <el-form-item prop="userName">
       <el-input type="text" placeholder="admin" :maxlength="20" size="large" v-model="loginForm.userName" > </el-input>
      </el-form-item>
      <el-form-item prop="userPwd">
       <el-input placeholder="●●●●●●" type="password" v-model="loginForm.userPwd" size="large" :maxlength="20"> </el-input>
      </el-form-item >
      <el-form-item prop="userType">
      <el-select v-model="loginForm.userType" placeholder="登录类型" style="width:100%;">
         <el-option label="学生" value="学生"></el-option>
         <el-option label="管理员" value="管理员"></el-option>
         </el-select>
      </el-form-item>
      <el-form-item style="width:100%;" class="login-btn">
         <el-button type="primary" size="large" style="width:100%;" @click.native.prevent="handleSubmit":loading="logining">{{logintext}}</el-button>
      </el-form-item>
    </el-form>
<!-- 注册 -->
    <el-form v-show="isShow" :model="registerForm" :rules="registerRules" ref="registerForm"  class="login-container">
      <el-button class="change" @click="isShow=false" type="text">登录</el-button>
      <div class="title">注册</div>
      <el-form-item prop="stuId">
        <el-input type="text" placeholder="学号" :maxlength="20" size="large" v-model="registerForm.stuId" > </el-input>
      </el-form-item>
      <el-form-item prop="stuName">
        <el-input type="text" placeholder="名字" :maxlength="20" size="large" v-model="registerForm.stuName" > </el-input>
      </el-form-item>
      <el-form-item prop="stuPwd">
        <el-input placeholder="密码" type="password" v-model="registerForm.stuPwd" size="large" :maxlength="20"> </el-input>
      </el-form-item >
      <el-form-item prop="stuSex">
      <el-select v-model="registerForm.stuSex" placeholder="性别" style="width:100%;">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="stuDept">
        <el-input type="text" placeholder="专业" :maxlength="20" size="large" v-model="registerForm.stuDept" > </el-input>
      </el-form-item>
      <el-form-item prop="stuPhone">
        <el-input type="text" placeholder="手机" :maxlength="20" size="large" v-model="registerForm.stuPhone" > </el-input>
      </el-form-item>
      <el-form-item style="width:100%;" class="login-btn">
        <el-button type="primary" size="large" style="width:100%;" @click.native.prevent="registerSubmit" :loading="logining">{{registertext}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import THREE from '../common/js/three.min.js';
export default {
    data() {
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入！'))
        }  
        // else if (!/[A-Za-z0-9~!@#$%^&*()_+]{6,20}$/.test(value)) {
        //   callback(new Error('Please check your userName!'))
        // }
         else {
          callback();
        }
      }
      return {
        isShow: false,
        logining: false,
        logintext: '登录',
        registertext: '注册',
        loginForm: {
          userName: '',
          userPwd:'',
          userType:'',
        },
        loginRules: {
          userName: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          userType: [
            { required: true, message: 'Please choose your identity', trigger: 'change' }
          ],
          userPwd: [
            { required: true, message: '请输入秘密！', trigger: 'blur' },
            { min: 6, max: 16, message: 'must be over 6 numbers', trigger: 'blur' }
          ]
        },
        registerForm: {
          stuId:'',
          stuName:'',
          stuSex:'',
          stuDept:'',
          stuPwd:'',
          stuPhone:''
        },
        registerRules:{
          stuId: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          stuName: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          stuDept: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          stuPhone: [
            { required: true, validator: validateUserName, trigger: 'blur' }
          ],
          stuSex: [
            { required: true, message: 'Please choose your identity', trigger: 'change' }
          ],
          stuPwd: [
            { required: true, message: '请输入秘密！', trigger: 'blur' },
            { min: 6, max: 16, message: 'must be over 6 numbers', trigger: 'blur' }
          ]
        }
      }
    },
  methods: {
    registerSubmit(){
      var _this = this;
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          _this.logining = true;
          _this.registertext = "Wait...";
          this.$ajax.post('/api/register',
            _this.registerForm
            ).then(function(response){
              if(0==response.data.code){
                _this.registertext = "注册...";
                setTimeout(function () {
                  _this.logining = false;
                  _this.$message({message: response.data.data,type: 'success'});
                  _this.$refs['registerForm'].resetFields();
                }, 1200);
              }else if(1==response.data.code){
                _this.$message({message: response.data.msg,type: 'error'});
              }
            }).catch(function(error){
            console.log(error);
          }); 
        } else { return false;}
        setTimeout(() => {
          _this.logining = false;
          _this.registertext = "注册";
        }, 3000);
      })
    },
    handleSubmit() {
      var _this = this;
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _this.logining = true;
          _this.logintext = "Wait...";
          this.$ajax.post('/api/login',
            _this.loginForm
            ).then(function(response){
              console.log(response.data);
              if(0==response.data.code){
                _this.logintext = "Loging...";
                setTimeout(function () {
                _this.logining = false;
                _this.$message({message: '登录成功',type: 'success'});
                sessionStorage.setItem('BIGDATA_PLATFORM', JSON.stringify(response.data.data));
                _this.$router.push({ path: '/Welcome' });},1200);
              };
            }).catch(function(error){console.log(error)}); 
        } else { return false;}
        setTimeout(() => {
          _this.logining = false;
          _this.logintext = "Enter";
        }, 3000);
      });
    }
  }
}

</script>

<style scoped>
.change{
  right:12px;
  top: 2px;
  color:#7bbaf4;
  position:absolute;
}
.login-title {
  text-align: center;
  padding: 50px 20px 30px;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 2px rgba(0,0,0, .4);
  letter-spacing: 3px;
  color: #fff;
  margin: 50px 0px 40px 0px;
}
.login-container {
  border-radius: 5px;
  width: 350px;
  max-width: 90%;
  padding: 20px 30px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  margin: 0 auto;
  position: relative;
  z-index: 10;
  }
.login-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #193c6d;
  background-image: linear-gradient(-135deg, #5da2d7, #7bbaf4, #2aa2d7);
  overflow: hidden;
}
@media (max-width: 480px){
    padding:10px;
    width:auto;
    background: none;
    box-shadow: none;
    .title{
      display: none;
    } 
}
.title {
    text-align: center;
    color: #888;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 25px;
    
  }
.login-btn{
    /* padding-top: 10px; */
    margin-bottom: 12px;
}
.el-button--large{
   padding:15px;
   border-radius: 5px;
   background: #63B8FF;
   border-color:#63B8FF;
   color:#fff;
}
.el-button--large:hover {
   background: #5d99e6;
   border-color:#4d99e6;
}
</style>